<template>
    <div id="wrapper">
        <p>hello1</p>
        <p>hello2</p>
        <p>hello3</p>
        <p>hello4</p>

        <div id="venn">123</div>
    </div>
</template>

<script>
import * as d3 from "d3";
import * as venn from "venn.js";
export default {
    data() {
        return {
            key: "",
        };
    },
    mounted() {
        d3.selectAll("p")
            .data([12, 24, 36,])
            .style("font-size", function (d) { return d + "px"; });
        //   veen

        // var sets = [
        //   { sets: ["A"], size: 12 },
        //   { sets: ["B"], size: 12 },
        //   { sets: ["A", "B"], size: 2 },
        // ];

        // var chart = venn.VennDiagram();
        // d3.select("#venn").datum(sets).call(chart);

        var sets = [{ sets: [0], size: 1958 },
        { sets: [1], size: 1856 },
        { sets: [2], size: 297 },
        { sets: [3], size: 17281 },
        { sets: [4], size: 4301 },
        { sets: [2, 0], size: 123 },
        { sets: [2, 1], size: 139 },
        { sets: [2, 3], size: 92 },
        { sets: [2, 4], size: 12 },
        { sets: [0, 0], size: 0, weight: 1e-10 },
        { sets: [0, 1], size: 0, weight: 1e-10 },
        { sets: [0, 3], size: 0, weight: 1e-10 },
        { sets: [0, 4], size: 0, weight: 1e-10 },
        { sets: [1, 0], size: 0, weight: 1e-10 },
        { sets: [1, 1], size: 0, weight: 1e-10 },
        { sets: [1, 3], size: 0, weight: 1e-10 },
        { sets: [1, 4], size: 0, weight: 1e-10 },
        { sets: [3, 0], size: 0, weight: 1e-10 },
        { sets: [3, 1], size: 0, weight: 1e-10 },
        { sets: [3, 3], size: 0, weight: 1e-10 },
        { sets: [3, 4], size: 0, weight: 1e-10 },
        { sets: [4, 0], size: 0, weight: 1e-10 },
        { sets: [4, 1], size: 0, weight: 1e-10 },
        { sets: [4, 3], size: 0, weight: 1e-10 },
        { sets: [4, 4], size: 0, weight: 1e-10 }];


        d3.select("#venn").datum(sets).call(venn.VennDiagram())


    },
};
</script>